<template>
  <a-modal
    v-model:open="visible"
    class="demandPlanDetailModal"
    destroyOnClose
    :width="1200"
    :maskClosable="false"
    @cancel="cancel"
    centered
  >
    <template #title>
      <div class="bigTitle">需求计划详情</div>
    </template>
    <a-divider />
    <!-- 头部信息 -->
    <div class="header-info">
      <div class="plan-title">
        <CalendarFilled style="font-size: 18px; margin-right: 5px" />
        <span class="title"
          >需求计划名称：{{ recordData.planName }}（{{
            recordData.planCode
          }}）</span
        >
        <!-- <a-button type="primary" class="monthly-btn">月度备用需求</a-button> -->
        <a-tag color="blue">{{ recordData.planType }}</a-tag>
      </div>

      <div class="info-grid">
        <div class="info-item">
          <span class="label">备用日期：</span>
          <span class="value"
            >{{ recordData.startDate || "--" }} ~
            {{ recordData.endDate || "--" }}</span
          >
        </div>
        <div class="info-item">
          <span class="label">月度备用需求容量：</span>
          <span class="value"
            >{{ recordData.monthlyDemandCapacity || "--" }} kW</span
          >
        </div>
        <div class="info-item">
          <span class="label">备用范围：</span>
          <span class="value">{{ recordData.demandRange || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">邀约时间：</span>
          <span class="value">{{ recordData.inviteTime || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">申报截止时间：</span>
          <span class="value">{{ recordData.deadlineTime || "--" }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前状态：</span>
          <span class="value">{{ recordData.currentStatus || "--" }}</span>
        </div>
      </div>
    </div>

    <!-- 标签页 -->
    <a-tabs
      v-model:activeKey="activeTab"
      class="detail-tabs"
      :destroyInactiveTabPane="true"
    >
      <a-tab-pane key="demand" tab="需求发布详情">
        <DemandPublishDetail :recordData="recordData" />
      </a-tab-pane>
      <a-tab-pane key="declare" tab="申报详情">
        <DeclareDetail :recordData="recordData" />
      </a-tab-pane>
      <a-tab-pane key="clearing" tab="出清结果">
        <ClearingResult :recordData="recordData" />
      </a-tab-pane>
    </a-tabs>

    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">关闭</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, watch } from "vue"
import DemandPublishDetail from "./DemandPublishDetail.vue"
import DeclareDetail from "./DeclareDetail.vue"
import ClearingResult from "./ClearingResult.vue"

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  recordData: {
    type: Object,
    default: () => ({}),
  },
})

const emits = defineEmits(["update:visible"])

const visible = ref(props.visible)
const activeTab = ref("demand")

// 监听visible变化
watch(
  () => props.visible,
  (val) => {
    visible.value = val
    if (val) {
      activeTab.value = "demand"
    }
  }
)

watch(visible, (val) => {
  emits("update:visible", val)
})

// 取消
const cancel = () => {
  visible.value = false
}
</script>

<style lang="less" scoped>
.bigTitle {
  font-size: 25px;
}
.header-info {
  margin-bottom: 24px;

  .plan-title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .icon {
      font-size: 18px;
      margin-right: 8px;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      margin-right: 16px;
      color: #fff;
    }

    .monthly-btn {
      background: #1890ff;
      border: none;
      border-radius: 4px;
      padding: 4px 12px;
      font-size: 12px;
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    .info-item {
      display: flex;

      .label {
        color: #999;
        margin-right: 8px;
        min-width: 120px;
      }

      .value {
        color: #fff;
      }
    }
  }
}

.detail-tabs {
  :deep(.ant-tabs-nav) {
    background: transparent;

    .ant-tabs-tab {
      color: #999;

      &.ant-tabs-tab-active {
        color: #1890ff;
      }
    }
  }

  :deep(.ant-tabs-content) {
    background: transparent;
  }
}

.footerBar {
  text-align: center;
  margin-top: 20px;
}

:deep(.ant-modal-header) {
  background: #1f1f1f;
  border-bottom: 1px solid #303030;
}

:deep(.ant-modal-content) {
  background: #1f1f1f;
  color: #fff;
}

:deep(.ant-modal-footer) {
  background: #1f1f1f;
  border-top: 1px solid #303030;
}
</style>
